<template>
	<div class="itemBox">
		<div class="itemBox_name">{{numberToChinese(props.items.id)}}号锅</div>
		<div class="itemBox_bottom">
			<div class="itemBox_bottom_gan">
				<div class="one" v-if="props.items.boolUpPotEmpty">
					<div class="nei">
						<div class="onetitle">
							干混计时
						</div>
						<div class="onetime">{{props.items.boolDryMixTime}}M</div>
					</div>
					<div class="neiright">
						<div class="title">
							干混温度
						</div>
						<div class="wen">
							{{props.items.intDryMixTemperatureRV}}℃
						</div>
					</div>
				</div>
				<div class="one" v-if="!props.items.boolUpPotEmpty">
					<div class="kong">
						空锅
					</div>
				</div>
				<div class="liansuo" v-if="props.items.boolInterlock===0">
					<div class="liansuobox"><img src="../../assets/warn.png" alt=""></div>
					<div class="liansuotitle">连锁未投入</div>
				</div>
				<div class="two">
					<div class="imgbox"
						:class="{'animate':props.items.boolPotRunF, 'fananimate':props.items.boolPotRunR,'stop-animation': !props.items.boolPotRunF&&!props.items.boolPotRunR}">
						<img src="../../assets/chi.png" alt="">
					</div>
					<div class="imgbox"
						:class="{'animate':props.items.boolPotRunF, 'fananimate':props.items.boolPotRunR,'stop-animation': !props.items.boolPotRunF&&!props.items.boolPotRunR}">
						<img src="../../assets/chi.png" alt="">
					</div>
					<div class="jian" v-if="props.items.boolFeeding">
						<div class="name">干料</div>
						<div class="arrow-container">

							<div class="arrow"></div>
						</div>
					</div>

					<div class="reversal" v-if="props.items.boolPotRunR">反转运行</div>
					<div class="weiyunx" v-if="!props.items.boolPotRunF">未运行</div>
					<div class="need" v-if="!props.items.boolUpPotEmpty">要料</div>
				</div>
				<div class="three">
					<div class="conflict" v-if="props.items.boolUpDoorOpen&&props.items.boolDryMixDoor">锅门限位冲突</div>
					<div class="open" v-if="props.items.boolUpDoorOpen">开门到位</div>
					<div class="close" v-if="props.items.boolDryMixDoor">关门到位</div>
					<div class="noclose" v-if="!props.items.boolDryMixDoor&&!props.items.boolUpDoorOpen">锅门未到位</div>
				</div>
			</div>
			<div class="itemBox_bottom_shi">
				<div class="one" v-if="props.items.boolDownPotEmpty">
					<div class="nei">
						<div class="onetitle">
							湿混计时
						</div>
						<div class="onetime">{{props.items.boolWetMixTime}}M</div>
					</div>
					<div class="neiright">
						<div class="title">
							湿混温度
						</div>
						<div class="wen">
							{{props.items.intWetMixTemperatureRV}}℃
						</div>
					</div>
				</div>
				<div class="one" v-if="!props.items.boolDownPotEmpty||props.items.boolPotFault">
					<div class="dai"  v-if="props.items.boolWaitOil">
						待加油
					</div>
					<div class="kong"  v-if="!props.items.boolDownPotEmpty && !props.items.boolWaitOil">
						空锅
					</div>
					<div class="fault" v-if="props.items.boolPotFault">
						设备故障
					</div>
				</div>
				<div class="two">
					<div class="imgbox"
						:class="{'animate':props.items.boolPotRunF, 'fananimate':props.items.boolPotRunR,'stop-animation': !props.items.boolPotRunF&&!props.items.boolPotRunR}">
						<img src="../../assets/chi.png" alt="">
					</div>
					<div class="imgbox"
						:class="{'animate':props.items.boolPotRunF, 'fananimate':props.items.boolPotRunR,'stop-animation': !props.items.boolPotRunF&&!props.items.boolPotRunR}">
						<img src="../../assets/chi.png" alt="">
					</div>
					
					<div class="jian" v-if="props.items.boolAddOil">
						<div class="name">沥青</div>
						<div class="arrow-container">
					
							<div class="arrow"></div>
						</div>
					</div>

					<div class="need" v-if="props.items.boolWaitOil">要油</div>
					<div class="reversal" v-if="props.items.boolPotRunR">反转运行</div>
					<div class="weiyunx" v-if="!props.items.boolPotRunF">未运行</div>
				</div>
				<div class="three">
					<div class="conflict" v-if="props.items.boolDownDoorOpen&&props.items.boolWetMixDoor">锅门限位冲突</div>
					<div class="close" v-if="props.items.boolWetMixDoor">关门到位</div>
					<div class="open" v-if="props.items.boolDownDoorOpen">开门到位</div>
					<div class="noclose" v-if="!props.items.boolWetMixDoor&&!props.items.boolDownDoorOpen">锅门未到位</div>
				</div>
			</div>
		</div>
		<div class="putInto" v-if="props.items.boolRunFeedback">投入运行</div>
		<div class="outInto" v-if="!props.items.boolRunFeedback">退出运行</div>
		<div class="complete" v-if="props.items.boolDryMixedOk && !props.items.boolWetMixedOk">
			干混完成
		</div>
		<div class="complete" v-if="props.items.boolWetMixedOk && !props.items.boolDryMixedOk">
			湿混完成
		</div>
		<div class="complete" v-if="props.items.boolDryWetMixedOk">
			干混、湿混完成
		</div>

	</div>
</template>

<script setup>
	import {
		defineProps,
		ref
	} from 'vue';
	const props = defineProps({
		items: {
			type: Object,
			required: true,
			default: () => {}
		}
	});


	const numberToChinese = (num) => {
		const numToChineseMap = {
			'0': '零',
			'1': '一',
			'2': '二',
			'3': '三',
			'4': '四',
			'5': '五',
			'6': '六',
			'7': '七',
			'8': '八',
			'9': '九'
		};

		// 检查传入的数字是否在映射对象的键中
		if (numToChineseMap.hasOwnProperty(num.toString())) {
			// 返回对应的中文数字
			return numToChineseMap[num.toString()];
		} else {
			// 如果传入的数字不在映射对象中，可以返回一个默认值或抛出错误
			// 这里为了简洁，只返回一个默认值
			return '数字超出范围';
		}
	}
</script>

<style lang="scss" scoped>
	.itemBox {
		width: 15%;

		&_name {
			text-align: center;
			font-size: 38px;
			margin-bottom: 12px;
		}

		&_bottom {
			position: relative;
			border: 1px #000 solid;

			&_gan {

				height: 260px;
				margin-bottom: 4px;
				// border-bottom: 1px #000 solid;

				.one {
					display: flex;
					justify-content: center;
					background-color: #0109e8;
					height: 60px;
					font-size: 30px;
					text-align: center;
					color: #fff;
					.neiright{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 50%;
						padding: 0 3px;
						box-sizing: border-box;
						text-align: center;
						background-color: #02c3e3;
						.title{
							font-size: 12px;
							width: 20%;
						}
						.wen{
							font-size: 22px;
							
						}
					}

					.nei {
						padding: 0 3px;
						box-sizing: border-box;
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-color: #02c3e3;

						.onetitle {
							width: 20%;
							font-size: 12px;
						}

						.onetime {
							font-size: 22px;
							
						}
					}

					.kong {
						line-height: 60px;
					}
				}

				.liansuo {
					width: 200px;

					display: flex;
					position: absolute;
					top: 1%;
					right: 10%;
					transform: translate(1%, -50%);

					.liansuobox {
						position: relative;
						width: 50px;
						height: 50px;

						img {
							width: 99%;
							height: 99%;
						}
					}

					.liansuotitle {
						font-size: 18px;
						font-weight: 550;
						padding-left: 20px;
						box-sizing: border-box;
						position: absolute;
						top: 56%;
						right: 20%;
						transform: translate(-8px, -50%);
						vertical-align: middle;
						height: 30px;
						line-height: 30px;
						width: 120px;
						background-color: #ffff00;

					}

				}

				.two {
					position: relative;
					background-color: #4572b1;
					height: 140px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.need {
						text-align: center;
						width: 68px;
						height: 38px;
						line-height: 38px;
						font-size: 28px;
						background-color: #03c242;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
					.weiyunx{
						border: 1px solid #000;
						text-align: center;
						width: 158px;
						height: 60px;
						line-height: 60px;
						font-size: 28px;
						background-color: #ffff00;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					.reversal {
						border: 1px solid #000;
						text-align: center;
						width: 158px;
						height: 60px;
						line-height: 60px;
						font-size: 28px;
						background-color: #ff00ff;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					@keyframes rotateGear {
						from {
							transform: rotate(0deg);
							/* 起始角度 */
						}

						to {
							transform: rotate(360deg);
							/* 结束角度，与起始角度相同，表示旋转一圈 */
						}
					}

					@keyframes fanrotateGear {
						from {
							transform: rotate(360deg);
							/* 起始角度 */
						}

						to {
							transform: rotate(0deg);
							/* 结束角度，与起始角度相同，表示旋转一圈 */
						}
					}

					.fananimate {
						animation: fanrotateGear 8s linear infinite;
					}

					.animate {
						animation: rotateGear 8s linear infinite;
					}

					// 定义一个停止动画的类，实际上只需要覆盖 animation 属性即可
					.stop-animation {
						animation: none;
					}

					.imgbox {
						width: 130px;
						height: 130px;


						img {
							width: 100%;
							height: 100%;

						}
					}

					.jian {
						position: absolute;
						left: 50%;
						top: 10px;
						transform: translateX(-50%);
						font-size: 12px;
						font-weight: 550;
						.name {
							text-align: center;
							position: absolute;
							bottom: 15px;
							left: 50%;
							transform: translateX(-50%);
							width: 0;
							height: 0;
							width: 20px;
							height: 40px;
							background-color: #ff0000;
						}

						.arrow-container {
							position: relative;
							width: 50px; // 可以根据需要调整宽度
							height: 50px; // 可以根据需要调整高度
							
						}

						.arrow {
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 0;
							height: 0;
							border-left: 25px solid transparent; // 箭头左侧的透明边框
							border-right: 25px solid transparent; // 箭头右侧的透明边框
							border-top: 25px solid #ff0000; // 箭头顶部的红色边框，形成箭头形状
						}
					}




				}

				.three {
					text-align: center;
					font-size: 28px;
					border-top: 1px solid #000;
					height: 50px;
					line-height: 50px;

					.conflict {

						background: linear-gradient(45deg,
								#000 0%,
								#ffff00 50%,
								#000 100%);

					}

					.close {
						background-color: #00bf30;
					}

					.open {
						background-color: #ff0000;
					}

					.noclose {
						background-color: #65cbef;
					}
				}
			}

			&_shi {

				height: 250px;

				.one {
					display: flex;
					justify-content: center;
					background-color: #0109e8;
					height: 60px;
					font-size: 30px;
					text-align: center;
					color: #fff;
					.neiright{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 50%;
						padding: 0 3px;
						box-sizing: border-box;
						text-align: center;
						background-color: #02c3e3;
						.title{
							font-size: 12px;
							width: 20%;
						}
						.wen{
							font-size: 22px;
							
						}
					}

					.nei {
						position: relative;
						padding: 0 3px;
						box-sizing: border-box;
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-color: #02c3e3;

						.onetitle {
							width: 20%;
							font-size: 12px;
						}

						.onetime {
							font-size: 22px;
							
						}
					}
					
					.dai{
						color: #FFF;
						line-height: 60px;
					}
					.kong {
						line-height: 60px;

					}

					.fault {
						position: absolute;
						top: 58%;
						left: 52%;
						transform: translate(-52%, -50%);

						color: #000;
						width: 80%;
						height: 50px;
						line-height: 50px;
						background-color: #ffff00;
						font-size: 28px;
					}
				}

				.two {
					position: relative;
					background-color: #4572b1;
					height: 140px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.need {
						text-align: center;
						width: 68px;
						height: 38px;
						line-height: 38px;
						font-size: 28px;
						background-color: #03c242;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
					.weiyunx{
						border: 1px solid #000;
						text-align: center;
						width: 158px;
						height: 60px;
						line-height: 60px;
						font-size: 28px;
						background-color: #ffff00;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					.reversal {
						border: 1px solid #000;
						text-align: center;
						width: 158px;
						height: 60px;
						line-height: 60px;
						font-size: 28px;
						background-color: #ff00ff;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}


					@keyframes rotateGear {
						from {
							transform: rotate(0deg);
							/* 起始角度 */
						}

						to {
							transform: rotate(360deg);
							/* 结束角度，与起始角度相同，表示旋转一圈 */
						}
					}

					@keyframes fanrotateGear {
						from {
							transform: rotate(360deg);
							/* 起始角度 */
						}

						to {
							transform: rotate(0deg);
							/* 结束角度，与起始角度相同，表示旋转一圈 */
						}
					}

					.fananimate {
						animation: fanrotateGear 8s linear infinite;
					}

					.animate {
						animation: rotateGear 8s linear infinite;
					}

					// 定义一个停止动画的类，实际上只需要覆盖 animation 属性即可
					.stop-animation {
						animation: none;
					}

					.imgbox {
						width: 130px;
						height: 130px;


						img {
							width: 100%;
							height: 100%;

						}
					}
					
					.jian {
						position: absolute;
						left: 50%;
						top: 10px;
						transform: translateX(-50%);
						font-size: 12px;
						font-weight: 550;
						.name {
							text-align: center;
							position: absolute;
							bottom: 15px;
							left: 50%;
							transform: translateX(-50%);
							width: 0;
							height: 0;
							width: 20px;
							height: 40px;
							background-color: #ff0000;
						}
					
						.arrow-container {
							position: relative;
							width: 50px; // 可以根据需要调整宽度
							height: 50px; // 可以根据需要调整高度
							
						}
					
						.arrow {
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 0;
							height: 0;
							border-left: 25px solid transparent; // 箭头左侧的透明边框
							border-right: 25px solid transparent; // 箭头右侧的透明边框
							border-top: 25px solid #ff0000; // 箭头顶部的红色边框，形成箭头形状
						}
					}
				}

				.three {
					text-align: center;
					font-size: 28px;
					border-top: 1px solid #000;
					height: 50px;
					line-height: 50px;

					.conflict {

						background: linear-gradient(45deg,
								#000 0%,
								#ffff00 50%,
								#000 100%);

					}

					.open {
						background-color: #ff0000;
					}

					.close {
						background-color: #00bf30;
					}

					.noclose {
						background-color: #65cbef;
					}
				}
			}
		}

		.putInto {
			margin-top: 8px;

			height: 50px;
			line-height: 50px;
			background-color: #49c0b4;
			text-align: center;
			font-size: 28px;
			border: 1px solid #000;
		}
		.outInto{
			margin-top: 8px;
			
			height: 50px;
			line-height: 50px;
			background-color: #c0c0c0;
			text-align: center;
			font-size: 28px;
			border: 1px solid #000;
		}

		.complete {
			margin-top: 8px;
			height: 30px;
			line-height: 30px;
			background-color: #71bbea;
			text-align: center;
			font-size: 21px;
		}

	}
</style>